<template>
  <div class="ie-table-query">
    <n-form
      :model="formValue"
      size="medium"
      :show-feedback="false"
      ref="formRef"
    >
      <n-grid
        x-gap="12"
        y-gap="12"
        cols="24"
        item-responsive
      >
        <n-grid-item
          v-for="item in options"
          span="11 800:6 1200:5 1600:4"
          :key="item.key"
        >
          <n-form-item
            :label="item.label"
            :path="item.key"
          >

            <n-date-picker
              v-if="['daterange', 'datetimerange'].indexOf(item.type) > -1"
              v-model:value="formValue[item.key]"
              v-bind="item"
              clearable
            />

            <n-input
              v-else-if="item.type === 'range'"
              v-model:value="formValue[item.key]"
              v-bind="item"
              pair
              separator="-"
              clearable
              type="number"
            />

            <!-- ASYNC SELECT -->
            <ie-async-select
              v-else-if="item.type === 'async'"
              v-model:value="formValue[item.key]"
              v-bind="item"
            />

            <!-- SELECT -->
            <n-select
              v-else-if="item.type === 'select'"
              v-model:value="formValue[item.key]"
              :options="item.options || []"
              :multiple="item.multiple"
              clearable
            />

            <n-input
              v-else
              v-model:value="formValue[item.key]"
              v-bind="item"
            />
          </n-form-item>
        </n-grid-item>

        <!-- Control Btn -->
        <n-grid-item span="6 800:4 1200:3 1600:3">
          <n-form-item>
            <n-space style="flex-wrap: nowrap;">
              <n-button @click="resetQuery" attr-type="button">重置</n-button>
              <n-button @click="setQuery" attr-type="button" type="primary">查询</n-button>
            </n-space>
          </n-form-item>
        </n-grid-item>
      </n-grid>
    </n-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { cloneDeep } from 'lodash-es'

import { modelValidator } from '/@/model'
import normalizeQueryOptions from '/@/utils/normalize-query-options'
import { toQuery, toJson } from '/@/utils/helper'

const props = defineProps({
  model: {
    validator: modelValidator,
    required: true
  }
})

const options = normalizeQueryOptions(props.model)

const route = useRoute()
const router = useRouter()

const formRef = ref()
const formInitValue = {}

// init default form value by props
for (let i = 0; i < options.length; i += 1) {
  const option = options[i]

  if (option.key) {
    formInitValue[option.key] = null
  }
}

const formValue = reactive(
  cloneDeep(formInitValue)
)

const initQuery = toJson(route.query)

Object.keys(initQuery).forEach(key => {
  if (formValue[key] !== undefined) {
    formValue[key] = initQuery[key]
  }
})

function resetQuery() {
  router
    .push({ name: route.name })
    .then(() => {
      Object.assign(formValue, formInitValue)
    })
}

function setQuery() {
  formRef.value.validate(err => {
    if (!err) {
      router.push(`${route.path}?${toQuery(formValue, options)}`)
    }
  })
}
</script>